import { Component, Prop, Emit, VModel } from 'vue-property-decorator';
import * as tsx from 'vue-tsx-support';
interface IVueTsxSupportTodoProps {
  vueTsxSupportMessage: string;
  value?: boolean;
}
@Component
export default class VueTsxSupportTodo extends tsx.Component<
  IVueTsxSupportTodoProps
> {
  @Prop({
    required: true,
  })
  public vueTsxSupportMessage!: string;
  @VModel({ type: Boolean }) private checked!: boolean;
  @Emit('change')
  private onInput(value: boolean) {
    console.log(value, 'oninput');
  }
  @Emit('change')
  private change() {
    /* const target:HTMLInputElement = e.target as HTMLInputElement;
      const value: boolean =  target.value as unknown as boolean; */
    /* this.checked = value; */
    this.checked = !this.checked;
    console.log('model', this.checked);
  }
  @Emit() private onChange(name: string) {
    console.log(name, this);
  }
  // @Prop({ type:  Object as ()=>IName,default:{age:1}}) ss!:IName
  //  @Prop({ type: Array as Prop<string[]>}) s1
  private render() {
    console.log('ren', this.checked);
    return (
      <p>
        {this.vueTsxSupportMessage}
        <span
          onClick={() => {
            this.onChange('chili');
          }}
        >
          change
        </span>
        <input type='checkbox' checked={this.checked} on-change={this.change} />
      </p>
    );
  }
}
